<template>
  <section class="content clear">
    <section class="content-search">
      <el-button size="mini" type="primary" @click="addCampus">添加组织级别</el-button>
    </section>
    <section class="content-list">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="schoolIndex" label="序号">
          <template slot-scope="scope">
            <span v-if="!scope.row.type">{{scope.row.schoolIndex}}</span>
            <el-input v-if="scope.row.type" size="mini" v-model="scope.row.schoolIndex" placeholder="请输入序号"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="schoolName" label="组织级别">
          <template slot-scope="scope">
            <span v-if="!scope.row.type">{{scope.row.schoolName}}</span>
            <el-input v-if="scope.row.type" size="mini" v-model="scope.row.schoolName" placeholder="请输入组织级别"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.type" @click="updateCampus(scope.row)" type="text" size="mini">修改</el-button>
            <el-button v-if="scope.row.type" @click="saveCampus(scope.row)" type="text" size="mini">保存</el-button>
            <el-button @click="deleteCampus(scope.row)" class="text-error" type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </section>
</template>

<script>
export default {
  name: 'organization',
  data () {
    return {
      tableData: [{
        schoolIndex: '001',
        schoolName: '清水河校区',
        type: false
      }]
    }
  },
  methods: {
    checkType () {
      let tag = false
      this.tableData.some((item) => {
        if (item.type) {
          tag = true
        }
      })
      return tag
    },
    addCampus () {
      if (this.checkType()) {
        this.$message.error('请先保存')
      } else {
        this.tableData.push({
          schoolIndex: '',
          schoolName: '',
          schoolAddress: '',
          type: true
        })
      }
    },
    updateCampus (val) {
      val.type = true
      console.log(this.tableData)
    },
    saveCampus (val) {
      val.type = false
    },
    deleteCampus (val) {
      console.log(val)
    }
  }
}
</script>
